<template>
  <div class="pk-leveldetail">
    <div class="pk-leveldetail-header">
      <pk-button type="default" :icon="Back" @click="goBack">返回</pk-button>
    </div>
    <div class="pk-leveldetail-desc mt-24">
      <el-descriptions title="级别信息">
        <el-descriptions-item label="级别">{{ lebelData.name }}</el-descriptions-item>
        <el-descriptions-item label="权重">{{ lebelData.ratio }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="pk-leveldetail-desc mt-24">
      <pk-button :icon="Plus" type="primary" @click="addUser">添加绑定评委</pk-button>
    </div>
    <div class="pk-leveldetail-table mt-24">
      <pk-table :tableConfig="tableConfig" :data="tableData" :total="total" @onSize="onSize">
        <template #options="{row}">
         <div class="flex-row">
          <div class="mr-8">
              <el-popconfirm
                  class="box-item"
                  title="确定要删除?"
                  placement="top"
                  @confirm="setDel(row)"
                >
                  <template #reference>
                    <pk-button type="danger" :icon="Delete">删除</pk-button>
                  </template>
                </el-popconfirm>
              </div>
          </div>
        </template>
      </pk-table>
    </div>
    <bind-user v-if="isBindUser" :curData="lebelData" @confirm="confirm" @onClose="isBindUser=false"></bind-user>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import PkButton from '@/components/pkui/pk-button/pk-button.vue'
import pkTable from '@/components/pkui/pk-table/pk-table.vue'
import { Back, Delete, Plus } from '@element-plus/icons-vue'
import bindUser from './component/bindUser.vue'
import { useRouter, useRoute } from 'vue-router'
import { userPage, dutiesGetNoBindJudges, dutiesUnbindJudges } from '@/api/api'
import { getTime } from '@/utils/utils'
const router = useRouter()
const route = useRoute()
const isBindUser = ref(false)
const lebelData = ref({})
const tableData = ref([])
const tableConfig = ref([
  {
    label: '评委名称',
    prop: 'username'
  },
  {
    label: '创建时间',
    prop: 'creatorTime'
  },
  {
    label: '修改时间',
    prop: 'lastModifyTime'
  },
  {
    label: '操作',
    type: 'slot',
    slotName: 'options'
  }
])
const total = ref(0)
const page = ref({
  pageNum: 1,
  pageSize: 10
})

const addUser = () => {
  isBindUser.value = true
}


const goBack = () => {
  router.go(-1)
} 

const confirm = () => {
  isBindUser.value = false
  getList()
}

const onSize = (e) => {
  page.value = {
    pageNum: e.page,
    pageSize: e.pageSize
  }
  getList()
}

const setDel = (e) => {
  const {id} = route.query
  dutiesUnbindJudges({
    id: id,
    userIdList: [e.id]
  }).then(res => {
    getList()
  })
}


const getList = () => {
  userPage({
    ...page.value,
    userDutiesId: lebelData.value.id
  }).then(res => {
    total.value = res.resData.count
    tableData.value = res.resData.data.map(item => {
      return {
        ...item,
        creatorTime: getTime(item.creatorTime / 1000, 'time'),
        lastModifyTime: getTime(item.lastModifyTime / 1000, 'time')
      }
    })
  }).catch(err => {
    console.log(err)
  })
}

const getInit = () => {
  const {id, name, ratio} = route.query
  lebelData.value = {
    id, 
    name, 
    ratio
  }
  getList()
}

onMounted(() => {
  getInit()
})


</script>

<style lang="scss" scoped>

</style>